<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
    <script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<style>
.layui-laydate {margin-left:-70px!important;}
</style>    
</head>

<body>

    <!-- 会议室预约 begin -->
    <div class="layui-card">
        <div class="layui-card-header">
            <h3>会议室预约</h3>
        </div>
        <div class="layui-card-body">

            <div id="meeting-room" class="mb10"></div>

        </div>
    </div>
    <!-- 会议室预约 end -->


<style>
#meeting-room .hd {height:30px;line-height: 30px;text-align: center;width:200px;margin:0 auto 10px;}
#meeting-room .hd a {float:left;padding:0 8px;transition: all .3s ease;}
#meeting-room .hd a:hover {background-color:#f5f5f5;border-radius:1em;}
#meeting-room .hd span {float:left;font-size: 20px;margin:0 15px;cursor: pointer;}
#meeting-room table {width:100%;border-collapse:collapse;}
#meeting-room table td,#meeting-room table th {border:1px solid #e6e6e6;height:60px;}
#meeting-room table th {font-weight: normal;background:#f5f5f5;transition: all .2s ease;}
#meeting-room table td>div {display: -webkit-flex;display: flex;/*-webkit-flex-direction:column;flex-direction:column;*/height:100%;}
#meeting-room table td>div>div {flex:1;}
#meeting-room table tr td:first-child {width:180px;padding:0 10px;}
#meeting-room .select-time>div:not(.ui-selected):hover {background:#e8e8e8;}
#meeting-room .select-time>div:nth-child(2) {border-left:1px solid #e6e6e6;}
#meeting-room table th.selecting {background:#333;color:#fff;}
.selectable .ui-selecting { background:#bce8f1; }
.selectable .ui-selected { background: #bce8f1; color: white; }
</style>

<script>
layui.use(['jquery','util','layer','laydate'],function(){
    var $       = layui.jquery,
        layer   = layui.layer,
        util    = layui.util,
        laydate = layui.laydate;

    $.fn.meeting = function(data){
        console.log(data)
        // 会议室,bg背景色在生成的时候随机给值存入数据
        // start:开始时间段，end：结束时间段，title：要显示的会议信息


        var _MEETINGHEAD,// 会议室head
            _MEETINGBODY,// 会议室body
            _MEETINGDATE = '';//日期

        _MEETINGHEAD = '<div class="hd"><a href="javascript:;" class="layui-icon layui-icon-left" lay-active="datePrev"></a><span id="meeting-date">'+data.time+'</span><a href="javascript:;" class="layui-icon layui-icon-right" lay-active="dateNext"></a></div>';

        var _hour = 24;//小时制
        for(var i=0;i<_hour;i++){
            _MEETINGDATE += '<th data-hour="'+i+'">'+(i<=12?"上午":"下午")+'<br>'+i+':00</th>';
        }

        var _roomArr = ''; //房间预定信息
        $.each(data.room,function(key,d){
            var _tdArr = '';
            if(data.room[key][data.time]){ // 如果这个会议室当天有预定的信息
                var _tds = [];
                for(var i=0;i<_hour;i++){
                    _tds.push('');
                }
                var _td='';
                //遍历当前会议室的所有会议
                $.each(data.room[key][data.time].meeting,function(index,item){
                    var _s = item.start.split(':'),
                        _e = item.end.split(':');
                    for(var i=0;i<_hour;i++){
                        if(i == _s[0]){// 开始时间
                            for(var a=i;a<=_e[0];a++){ //开始时间到结束时间范围
                                var _temp='';
                                if(_e[0] == a && _e[1] == '30'){//结束时间等于当前，结束时间是30
                                    _temp += '<div start="'+a+':00" end="'+a+':30" style="background:'+item.bg+'" class="layui-tips" data-tips="'+item.title+'" data-placement="top"></div><div start="'+a+':30" end="'+(a+1)+':00"></div>';
                                }
                                else if(Number(_e[0]) > Number(_s[0])){//结束时间 大于 开始时间
                                    if(a<_e[0] && a>_s[0] || a == _s[0] && _s[1]=='00'){// 从00开始，当前大于开始小于结束，占用全部时间
                                        _temp += '<div style="background:'+item.bg+'" class="layui-tips" data-tips="'+item.title+'" data-placement="top"></div>';
                                    }
                                    else if(_s[1]=='30' && a==_s[0]){//开始时间从30分，当前等于开始时间
                                        _temp += '<div start="'+a+':00" end="'+a+':30"></div><div start="'+a+':30" end="'+(a+1)+':00" style="background:'+item.bg+'" class="layui-tips" data-tips="'+item.title+'" data-placement="top"></div>';
                                    }
                                }
                                if(_tds[a]){
                                    _tds[a]=_tds[a].replace('<div start="'+a+':30" end="'+(a+1)+':00"></div>','')
                                    _temp = _temp.replace('<div start="'+a+':00" end="'+a+':30"></div>','');
                                }
                                _tds[a] += _temp;
                            }
                        }
                    }
                })

                $.each(_tds,function(a,b){
                    if(b){
                        _td += '<td><div class="select-time">'+b+'</div></td>';
                    }else{
                        _td += '<td><div class="select-time"><div start="'+a+':00" end="'+a+':30"></div><div start="'+a+':30" end="'+(a+1)+':00"></div></div></td>';
                    }
                })
                _tdArr += _td;
            }else{
                for(var i=0;i<_hour;i++){
                    _tdArr += '<td><div class="select-time"><div start="'+i+':00" end="'+i+':30"></div><div start="'+i+':30" end="'+(i+1)+':00"></div></div></td>';
                }
            }
            _roomArr += '<tr class="selectable"><td >'+key+'</td>'+_tdArr+'</tr>'
        })
        _MEETINGBODY = '<table>'+
                       '    <thead><tr><th>会议室名称</th>'+_MEETINGDATE+'</tr></thead>'+
                       '    <tbody>'+_roomArr+'</tbody>'+
                       '</table>';
        $(this).html(_MEETINGHEAD + _MEETINGBODY);

        $( "#meeting-room tbody tr").selectable({
            filter:'[start]',
            cancel:'.layui-tips',
            start:function(event){
                //console.log(event)
                //console.log($(this).find('.ui-selecting').data('type'))
                $('#meeting-room [start]').removeClass('ui-selected');
            },
            stop:function(event){
                $('#meeting-room thead th').removeClass('selecting');
                var _room = event.target.innerText;
                var _start = $(this).find('.ui-selected').first().attr('start');
                var _end = $(this).find('.ui-selected').last().attr('end');
                console.log('开始时间',_start)
                console.log('结束时间',_end)

                layer.open({
                    type:2,
                    title:'会议室预约',
                    content:['popup_会议室预约.html','no'],
                    area:['600px',],
                    offset:'200px',
                    success:function(layero,index){
                        var iframe = window['layui-layer-iframe' + index];
                        iframe.getMeetingVal({//执行子层方法
                            room:_room,
                            start:_start,
                            end:_end,
                        });
                    }
                })
            },
            selected:function(event,ui){
                //console.log(ui.selected)
            },
            selecting:function(event,ui){
                var _index = $(ui.selecting).parent().parent().index();
                $('#meeting-room thead th').eq(_index).addClass('selecting');
            },
            unselecting:function(event,ui){
                var _index = $(ui.unselecting).parent().parent().index();
                var _currentIndex = $(ui.unselecting).index();
                console.log(_index)
                if(_currentIndex == 0) $('#meeting-room thead th').eq(_index).removeClass('selecting');                
            }
        });

        // 切换日期
        laydate.render({
            elem:'#meeting-date',
            showBottom:false,
            done: function(value, date, endDate){
                meetingInit(value);
            }
        });

    };



   
    // 会议室预定数据
    var meetingRoomData = {
        '3号楼2-1会议室':{
            '2021-04-20':{
                meeting:[
                    {start:'9:00',end:'10:30',title:'9:00 ~ 10:30 杨兵 - 运营会议 ',bg:'#78e578'},
                    {start:'12:30',end:'16:00',title:'12:30 ~ 16:00 冯超 - 售后报告解读',bg:'#e2fd9a'},
                    {start:'17:00',end:'18:00',title:'17:00 ~ 18:00 冯超 - 售后报告 ',bg:'#fdbc75'},
                ]
            },
            '2021-04-21':{
                meeting:[
                    {start:'8:30',end:'15:00',title:'8:30 ~ 15:00 孙文娟 - 培训',bg:'#d2e8ff'},
                    {start:'16:00',end:'17:30',title:'16:00 ~ 17:30 销售培训--蛋白与代谢',bg:'#e170b7'},
                ]
            },
        },
        '25号楼多功能厅':{
        },
        '25号楼东区会议室（一）':{
            '2021-04-22':{
                meeting:[
                    {start:'9:00',end:'11:30',title:'9:00 ~ 11:30 会议1 ',bg:'#484368'},
                    {start:'15:00',end:'15:30',title:'15:00 ~ 15:30 会议2',bg:'#080'},
                    {start:'15:30',end:'18:30',title:'15:30 ~ 18:30 会议3',bg:'#f80'},
                ]
            },              
        },
        '25号楼东区会议室（二）':{
        },
        '25号楼东区会议室（三）':{
        },
        '25号楼东区洽谈室（一）':{
        },
        '25号楼东区洽谈室（二）':{
        },
        '25号楼东区洽谈室（三）':{
        },
    }

    // 会议室初始化
    function meetingInit(date) {
        // ajax读取会议室数据
        $('#meeting-room').meeting({
            time:date,
            room:meetingRoomData,
        });
    }
    meetingInit(getnowtime())

    function getnowtime() {
        var nowtime = new Date();
        var year = nowtime.getFullYear();
        var month = padleft0(nowtime.getMonth() + 1);
        var day = padleft0(nowtime.getDate());
        return year + "-" + month + "-" + day;
    }
    function padleft0(obj) {
        return obj.toString().replace(/^[0-9]{1}$/, "0" + obj);
    }


    /**
     * 添加会议室预约
     * 注释：点击任何一个格子都能弹出预约框。
     * 在空白格子内点击，会获取会议室名称和时间
     * 当点击以预约的格子，需要获取相关的数据进行赋值，并可进行修改
     */
    // $('body').on('click','#meeting-room .select-time>div',function(){
    //     var _tdIndex = $(this).parent().parent().index();
    //     var _name = $(this).parents('tr').children('td:first-child').html();
    //     //var _date = $('#meeting-room .hd span').html();
    //     var _type = $(this).data('type');//获取当前时间段里，是前30分钟，还是后30分钟
    //     var _time = $('#meeting-room table thead th').eq(_tdIndex).data('hour');//获取当前时间段
    //     var _startTime;
    //     if(_type == '00'){
    //         _startTime = _time+':'+'00'
    //     }else{
    //         _startTime = _time+':'+'30'
    //     }

    //     layer.open({
    //         type:2,
    //         title:'会议室预约',
    //         content:['popup_会议室预约.html','no'],
    //         area:['600px',],
    //         offset:'200px',
    //         success:function(layero,index){
    //             var iframe = window['layui-layer-iframe' + index];
    //             iframe.getMeetingVal({//执行子层方法
    //                 name:_name,
    //                 startTime:_startTime,
    //             });
    //         }
    //     })
    // });

    // 切换日期
    util.event('lay-active',{
        datePrev:function(){// 上一日
            var _date = getNextDate($('#meeting-date').html(),-1);
            meetingInit(_date)
        },
        dateNext:function(){// 下一日
            var _date = getNextDate($('#meeting-date').html(),+1);
            meetingInit(_date)
        }
    });
    function getNextDate(date, day) { 
    　　var dd = new Date(date);
    　　dd.setDate(dd.getDate() + day);
    　　var y = dd.getFullYear();
    　　var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
    　　var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
    　　return y + "-" + m + "-" + d;
    };

    $(document).on('mouseover mouseout','#meeting-room tbody td>div',function(event){
        if(event.type == "mouseover"){
            var index = $(this).parent().index();
            $('#meeting-room thead th').eq(index).css({background:'#333',color:'#fff'});
            $(this).parents('tr').find('td:first').css({color:'#3d59ce'});
        }else if(event.type == "mouseout"){
             $('#meeting-room thead th').removeAttr('style');
             $(this).parents('tr').find('td:first').removeAttr('style');
        }
    });



    /* 全局tips */
    var openTips;
    $(document).on('mouseover mouseout','.layui-tips',function(event){
        if(event.type == "mouseover"){
            var tips = $(this).data('tips'),
                placement = $(this).data('placement'),
                _p;
            switch (placement) {
                case 'top':
                    _p = 1;
                    break; 
                case 'right':
                    _p = 2;
                    break;
                case 'bottom':
                    _p = 3;
                    break;
                 case 'left':
                    _p = 4;
                    break;
                default:
                    _p = 2;
                    break;
            };
            openTips = layer.tips(tips, $(this), {tips: [_p, '#2f4056'], time: 30000});        
        }else if(event.type == "mouseout"){
            layer.close(openTips);
        }
    });



});
</script>

</body>
</html>
